<template>
  <div>
    <div class="row">
      <div class="text-h4 tw-m-5 " style="padding-left: 3px;border-left: 5px solid #3370FF;">
        你的选题
      </div>
      <blockquote v-if="!choose"
                  class="tw-p-4  tw-rounded-xl tw-ml-3 tw-my-4 tw-w-full tw-border-l-4 tw-border-gray-300 tw-bg-gray-50">
        你目前还未选题任何课题
      </blockquote>

      <blockquote v-else
                  class="tw-p-4 tw-ml-3 tw-my-4 tw-rounded-xl tw-w-full tw-border-l-4 tw-border-gray-300 tw-bg-gray-50">
        <q-expansion-item :label="choose.project.pname">
          <q-card class="tw-mt-2">
            <q-card-section>
              <div class="tw-space-y-3">
                <div class="text-h6 " style="padding-left: 3px;border-left: 5px solid #3370FF;">选题信息</div>
                <div><span class="tw-text-gray-400">描述：</span>{{ choose.project.pdesc }}</div>
                <div>
                  <span class="tw-text-gray-400">学院：</span>
                  {{ choose.project.dept }}
                </div>
                <div>
                  <span class="tw-text-gray-400">更新时间：</span>
                  {{ dayjs(choose.project.updated_time).format('YYYY-MM-DD HH:mm:ss') }}
                </div>
                <div>
                  <span class="tw-text-gray-400">创建时间：</span>
                  {{ dayjs(choose.project.created_time).format('YYYY-MM-DD HH:mm:ss') }}
                </div>
              </div>
              <div class="tw-mt-2">
                <div class="text-h6" style="padding-left: 3px;border-left: 5px solid #3370FF;">
                  教师信息
                </div>
                <div class="tw-grid tw-mt-2 tw-gap-3 tw-grid-cols-3">
                  <div>
                    <span class="text-grey">教师名称</span>:{{ choose.tname }}
                  </div>
                  <div>
                    <span class="text-grey">教师邮箱</span>:{{ choose.email }}
                  </div>
                  <div>
                    <span class="text-grey">教师电话</span>:{{ choose.tel }}
                  </div>
                  <div>
                    <span class="text-grey">教师职称</span>:{{ choose.title }}
                  </div>
                  <div>
                    <span class="text-grey">教师办公</span>室:{{ choose.office }}
                  </div>
                  <div>
                    <span class="text-grey">教师QQ</span>:{{ choose.qq }}
                  </div>
                </div>
              </div>
            </q-card-section>
            <q-card-actions>
              <q-btn color="primary" label="取消选题" @click="cancel"/>
            </q-card-actions>
          </q-card>
        </q-expansion-item>
      </blockquote>

    </div>
    <q-separator class="tw-m-4 tw-mb-7"/>
    <div class="text-h4 tw-m-5 " style="padding-left: 3px;border-left: 5px solid #3370FF;">
      课题列表
    </div>
    <div v-if="projects">
      <q-table
        style="max-height: 500px;overflow:  hidden;overflow-y: auto"
        class="q-ma-sm tw-border tw-rounded-2xl"
        :rows="projects"
        :columns="columns"
        row-key="pid"
        v-model:selected="selected"
        selection="single"
        flat
        rows-per-page-label="每页显示"
      >
        <template v-slot:body-cell-pdesc="props">
          <q-td :props="props">
            <div>
              {{ props.value.substring(0, 20) }}...
              <q-tooltip max-width="400px">
                <q-td>{{ props.value }}</q-td>
              </q-tooltip>
            </div>
            <div class="tw-underline">
              {{ props.row.details }}
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
    <div class="row">
      <q-btn class="tw-m-4" color="primary" label="确认选题" @click="confirm"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {api} from "boot/axios";
import {date} from 'quasar'
import {useQuasar} from "quasar";
import dayjs from 'dayjs'

let $q = useQuasar()
let router = useRouter()
let projects = ref([])
let selected = ref([])
let choose = ref(null)
const columns = [
  {
    name: 'pname',
    label: "课题名称",
    field: row => row.pname,
  },
  {
    name: 'pdesc',
    label: "课题描述",
    field: row => row.pdesc,
  },
  {
    name: 'status',
    label: '状态',
    field: row => row.status_code,
    sortable: true,
  },
  {
    name: 'created_time',
    label: "创建时间",
    field: row => row.created_time
  },
  {
    name: 'updated_time',
    label: "更新时间",
    field: row => row.updated_time
  }
]
let uinfo = JSON.parse(localStorage.getItem('info'))


api({
  url: '/job/project/getall?' + new URLSearchParams({dept: uinfo.dept}),
  method: 'get'
}).then(res => {
  projects.value = res.data.data
  projects.value.forEach((item, index) => {
    item.created_time = date.formatDate(item.created_time, 'YYYY-MM-DD HH:mm:ss')
    item.updated_time = date.formatDate(item.updated_time, 'YYYY-MM-DD HH:mm:ss')
    item.status_code = item.status === 0 ? '未选' : '已选'
  })
})
api({
  url: '/job/project/check?' + new URLSearchParams({snum: uinfo.snum}),
  method: 'get'
}).then(res => {
  let response = res.data
  if (response.code === 200) {
    choose.value = response.data
  } else {
    choose.value = false
  }
})
let cancel = () => {
  let fromData = new FormData()
  fromData.append('pid', choose.value.project.pid)
  fromData.append('snum', uinfo.snum)
  api({
    url: '/job/project/cancel',
    method: "post",
    data: fromData
  }).then(res => {
    res = res.data
    if (res.code === 200) {
      $q.notify({
        message: '取消成功',
        color: 'positive',
        position: 'bottom',
        timeout: 1000
      })
      choose.value = false
    } else {
      $q.notify({
        message: '取消失败',
        color: 'negative',
        position: 'bottom',
        timeout: 1000
      })
    }
  }).then(()=>{
     router.go(0)
  })

}
let confirm = () => {
  let item = selected.value[0]
  if (item.status === 1) {
    $q.notify({
      message: '该课题已被选',
      color: 'negative',
      position: 'bottom',
      timeout: 1000
    })
  } else {
    if (choose.value) {
      $q.notify({
        message: '您已选题',
        color: 'negative',
        position: 'bottom',
        timeout: 1000
      })
      return
    }
    let formData = new FormData()
    formData.append('pid', item.pid)
    formData.append('snum', uinfo.snum)

    api('/job/project/confirm', {
      method: 'post',
      data: formData
    }).then(res => {
      let response = res.data
      if (response.code === 200) {
        $q.notify({
          message: '选题成功',
          color: 'positive',
          position: 'bottom',
          timeout: 1000
        })
        choose.value = response.data
      } else {
        $q.notify({
          message: '选题失败',
          color: 'negative',
          position: 'bottom',
          timeout: 1000
        })
      }
    }).then(()=>{
      // refresh page
      router.go(0)

    })
  }
}
</script>

<style scoped>

</style>
